.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--app-background);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--theme-primary-light-rgb, 255, 182, 193), 0.1) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
  }

  /* 主题特定背景 */
  &.theme-pink {
    --app-background: linear-gradient(135deg, #FFF5F7 0%, #FFE4E1 50%, #FFF0F5 100%);
  }

  &.theme-blue {
    --app-background: linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 50%, #F5FAFF 100%);
  }

  &.theme-purple {
    --app-background: linear-gradient(135deg, #F8F4FF 0%, #F3E5FF 50%, #FAF7FF 100%);
  }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.header {
  background: var(--app-header-bg);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 8px 32px var(--app-card-shadow);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;

  h1 {
    color: var(--app-title-color);
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(var(--theme-primary-light-rgb, 255, 105, 180), 0.3);
    letter-spacing: 1px;
  }

  p {
    color: var(--app-subtitle-color);
    font-size: 1.2rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 1.5rem;
  }
}

.themeSelector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  
  span {
    color: var(--app-title-color);
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(var(--theme-primary-light-rgb, 255, 105, 180), 0.2);
  }
}

.main {
  flex: 1;
  padding: 3rem 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  gap:2rem;
  overflow: visible;
}

.demoCard {
  width: 100%;
  max-width: 700px;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 245, 0.9) 100%);
  border-radius: 24px;
  box-shadow: 0 20px 60px var(--app-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: visible;
  position: relative;
  z-index: 10;

  h2 {
    margin-bottom: 2rem;
    color: var(--app-demo-title-color);
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(var(--theme-primary-light-rgb, 255, 105, 180), 0.2);
  }
}

.buttonGroup {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

.sliderGroup {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sliderItem {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  div {
    color: var(--app-slider-text-color);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(var(--theme-primary-light-rgb, 255, 105, 180), 0.2);
  }
}

.selectGroup {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow: visible;
}

.selectItem {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: visible;
  position: relative;

  div {
    color: var(--app-select-text-color);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(var(--theme-primary-light-rgb, 255, 105, 180), 0.2);
  }
}